<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-13 flex v-align-c">
      <span></span>
      <i>全店风格</i>
    </h2>
    <h3 class="pancel-s-title">配色方案</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <ul class="tem-list">
        <li v-for="(item, index) in templateData" :key="index"
          class="flex pointer" @click="setStyleType(item.styleType, index)" :class="activeIndex === index ? 'actived' : ''">
          <div class="flex-item font-12">{{ item.styleName }}</div>
          <div class="style-color" :class="'style-' + item.styleType">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </li>
      </ul>
    </el-form>
  </div>
</template>

<script>
  export default {
    components: { },
    props: {
      customPage1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        customPage: {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          style: {},
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        },
        fullScreenLoading: null,
        templateData: [
          { styleName: '风格一', styleType: 10 },
          { styleName: '风格二', styleType: 11 },
          { styleName: '风格三', styleType: 12 },
          { styleName: '风格四', styleType: 13 },
          { styleName: '风格五', styleType: 14 },
          { styleName: '风格六', styleType: 15 }
        ],
        styleIndex: {
          '10': 0,
          '11': 1,
          '12': 2,
          '13': 3,
          '14': 4,
          '15': 5
        },
        activeIndex: 0
      }
    },
    // 初始化页面
    created() {
      this.customPage = this.customPage1
      const that = this
      this.$bus.$on('resetStyle', function(style) {
        that.customPage.style = style
        that.init()
      })
      this.init()
    },
    methods: {
      setStyleType(styleType, index) {
        this.activeIndex = index
        this.customPage.style.styleType = styleType
      },
      init() {
        if (this.customPage.style && this.customPage.style.styleType) {
          const styleType = this.customPage.style.styleType + ''
          const index = this.styleIndex[styleType]
          this.setStyleType(styleType, index)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .tem-list{
    border: #f1f6fb 1px solid;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    li{
      padding: 23px 20px;
      &.actived{
        color: #409EFF;
        background: #f3f6ff;
      }
      .style-color{
        span{
          width: 24px;
          height: 24px;
          margin-left: 3px;
          display: inline-block;
          border-radius: 2px;
          position: relative;
          overflow: hidden;
        }
        &.style-10{
          span{
            &:nth-child(1){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(2){
              background: #ffe100;
              border: #ffe100 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
        &.style-11{
          span{
            &:nth-child(1){
              background: #0fa0fe;
              border: #0fa0fe 1px solid;
            }
            &:nth-child(2){
              background: #1e77f5;
              border: #1e77f5 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #1a98fc;
              border: #1a98fc 1px solid;
            }
          }
        }
        &.style-12{
          span{
            &:nth-child(1){
              background: #63df70;
              border: #63df70 1px solid;
            }
            &:nth-child(2){
              background: #1ebb1c;
              border: #1ebb1c 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
        &.style-13{
          span{
            &:nth-child(1){
              background: #f5cc93;
              border: #f5cc93 1px solid;
            }
            &:nth-child(2){
              background: #daac6f;
              border: #daac6f 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #f6e9d8;
              border: #f6e9d8 1px solid;
            }
          }
        }
        &.style-14{
          span{
            &:nth-child(1){
              background: #ffa201;
              border: #ffa201 1px solid;
            }
            &:nth-child(2){
              background: #ff7024;
              border: #ff7024 1px solid;
            }
            &:nth-child(3){
              background: #ffd247;
              border: #ffd247 1px solid;
            }
            &:nth-child(4){
              background: #ffa235;
              border: #ffa235 1px solid;
            }
          }
        }
        &.style-15{
          span{
            &:nth-child(1){
              background: #ff5a5e;
              border: #ff5a5e 1px solid;
            }
            &:nth-child(2){
              background: #ff2e35;
              border: #ff2e35 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
      }
    }
  }
</style>